<script setup>
// import { useRouter, useRoute } from 'vue-router'
// const route = useRoute()
// router.push('/')
// main.js
import { onMounted, ref } from "vue";
import homeImg from "@/assets/homeImg/home.png";
import { useRouter } from "vue-router";
const router = useRouter();

import { useNavigationBarStore } from "@/stores/navigationBar.js";
const { setIsClick } = useNavigationBarStore();
// import onClickBg from '@/assets/homeImg/onClickBg.png'

// const imgList = [
//   "/src/assets/homeImg/home1.jpg",
//   "/src/assets/homeImg/home2.jpg",
//   "/src/assets/homeImg/home3.jpeg",
// ];

const isTextMin = ref(false);
onMounted(() => {
  // 模拟加载延迟后显示标题
  setTimeout(() => {
    isTextMin.value = true;
  }, 100);
});

//点击进入
const onEnter = () => {
  router.push("/mainPage");
  setIsClick(1);
};
</script>

<template>
  <!-- 首页 -->
  <div class="centent">
    <!-- <el-icon color="red" class="icon">
      <el-icon-plus></el-icon-plus>
    </el-icon> 用这种方法引入图标-->
    <!-- 大标题 -->
    <!-- <div class="title">
      <div class="loge">
        <Transition
          enter-active-class="animate__animated animate__bounceInLeft "
          leave-active-class="animate__animated animate__bounceOutRight"
        >
          <el-image v-if="isTextMin" class="img" :src="loge" fit="cover" />
        </Transition>
      </div>
      <div class="text">
        <Transition
          enter-active-class="animate__animated animate__bounceInDown"
          leave-active-class="animate__animated animate__bounceOutRight"
        >
          <Title v-if="isTextMin" class="title1" :title="'华'"></Title>
        </Transition>

        <Transition
          enter-active-class="animate__animated animate__bounceInDown"
          leave-active-class="animate__animated animate__bounceOutRight"
        >
          <Title v-if="isTextMin" class="title2" :title="'夏'"></Title>
        </Transition>

        <Transition
          enter-active-class="animate__animated animate__bounceInDown"
          leave-active-class="animate__animated animate__bounceOutRight"
        >
          <Title v-if="isTextMin" class="title3" :title="'熵'"></Title>
        </Transition>

        <Transition
          enter-active-class="animate__animated animate__bounceInDown"
          leave-active-class="animate__animated animate__bounceOutRight"
        >
          <Title v-if="isTextMin" class="title4" :title="'鉴'"></Title>
        </Transition>

        <Transition
          enter-active-class="animate__animated animate__bounceInDown"
          leave-active-class="animate__animated animate__bounceOutRight"
        >
          <Title v-if="isTextMin" class="title5" :title="'录'"></Title>
        </Transition>
      </div>

      <DynamicCharacters
        v-if="isTextMin"
        class="textMin"
        :text="'&mdash;&mdash; 中华自然科学及其它优秀文化瑰宝可视化'"
        :animate="'animate__bounceInRight'"
      ></DynamicCharacters>
    </div> -->
    <el-image style="width: 100%; height: 100%" :src="homeImg" fit="cover" />

    <!-- 标题文字 -->
    <div class="title">
      <div class="text">
        <div class="left">
          <div class="hua">华</div>
          <div class="xia">夏</div>
          <div class="EnglishTitle">Huaxia Entropy Appraisal Record</div>
        </div>
        <div class="right">
          <div class="shang">熵</div>
          <div class="jian">鉴</div>
          <div class="lu">录</div>
          <div class="data">
            <div class="box">2</div>
            <div class="box">0</div>
            <div class="box">2</div>
            <div class="box">5</div>
          </div>
        </div>
      </div>
      <div class="textMin">中华自然科学及其它优秀文化瑰宝可视化</div>
      <div class="enter" @click="onEnter">点击进入</div>
    </div>

    <!-- 轮播图
    <el-carousel
      :interval="3500"
      :pause-on-hover="false"
      indicator-position="none"
      height="100vh"
    >
      <el-carousel-item v-for="item in imgList" :key="item">
        <el-image style="width: 100%; height: 100%" :src="item" fit="cover" />
      </el-carousel-item>
    </el-carousel> -->

    <!-- 导航栏 -->
    <Transition
      name="custom-classes"
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__bounceOutRight"
    >
      <NavigationBar v-if="isTextMin"></NavigationBar>
    </Transition>
  </div>
</template>

<style lang="scss">
//文字动画
// .titleTranstion-enter-active,
// .titleTranstion-leave-active {
//   transition: transform 0.5s ease;
// }
// .titleTranstion-enter-from,
// .titleTranstion-leave-to {
//   transform: translateY(-100%) scale(0.5);
// }
// .titleTranstion-enter-from {
//   transition-delay: 1s;
//   // transform: translateY(100%) scale(1);
// }
</style>

<style lang="scss" scoped>
.centent {
  // .title1 {
  //   margin-right: 20px;
  //   --animate-duration: 0.6s; /* 控制动画速度 */
  // }
  // .title2 {
  //   margin-right: 20px;
  //   --animate-duration: 0.7s; /* 控制动画速度 */
  // }
  // .title3 {
  //   margin-right: 20px;
  //   --animate-duration: 0.8s; /* 控制动画速度 */
  // }
  // .title4 {
  //   margin-right: 20px;
  //   --animate-duration: 0.9s; /* 控制动画速度 */
  // }
  // .title5 {
  //   --animate-duration: 1s; /* 控制动画速度 */
  // }

  // position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  // .title {
  //   position: absolute;
  //   // background: #b05959;
  //   display: flex;
  //   align-items: center;
  //   z-index: 10;
  //   top: 40%;
  //   left: 50%;
  //   transform: translate(-50%, -50%);
  //   background: "#fff";
  //   display: flex;
  //   .loge {
  //     .img {
  //       width: 250px;
  //       height: 250px;
  //       border-radius: 50%;
  //     }
  //   }
  //   .text {
  //     display: flex;
  //     width: 750px;
  //     height: 250px;
  //     margin-left: 50px;
  //     z-index: 100;
  //     // background: #d15959;
  //   }
  //   .textMin {
  //     position: absolute;
  //     display: inline-block;
  //     font-size: 20px;
  //     top: 85%;
  //     right: 0;
  //     // background: #ecdfdf;
  //   }
  // }

  .title {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // background: #c54d4d;
    .text {
      display: flex;
      .left {
        & > div {
          font-size: 170px;
          line-height: 1em;
          width: max-content;
        }
        .hua {
          // background: #b66969;
          font-weight: 600;
          font-family: homeTitle1;
        }
        .xia {
          font-weight: 600;

          font-family: homeTitle1;
        }
        .EnglishTitle {
          margin-top: 20px;
          font-size: 25px;
          margin-left: 40px;
          width: 50px;
          font-family: "kaiti" !important;
        }
      }
      .right {
        font-weight: 600;

        font-family: homeTitle1;
        margin-top: 100px;
        flex: 1;
        & > div {
          font-size: 140px;
          line-height: 1em;
          width: max-content;
          // background: #8dcb70;
        }
        .shang {
          font-size: 120px;
        }
        .data {
          position: absolute;
          top: 115px;
          right: 0;
          font-size: 25px;
          .box {
            font-size: 25px;
          }
        }
      }
    }
    .textMin {
      margin-top: 10px;
      // margin-left: 10px;
      font-family: "kaiti" !important;
      font-size: 20px;
    }
    .enter {
      overflow: auto;
      margin-top: 30px;
      font-size: 40px;
      background: url(@/assets/homeImg/onClickBg.png) no-repeat center/100% 80%;
      padding: 40px 50px;
      font-family: NavigationBar;
      cursor: pointer;
    }
  }

  &::before {
    content: ""; /* 必须设置 content */
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0) 80px
    );
    pointer-events: none; /* 允许穿透点击下方内容 */
  }
}
</style>
